<template>
  <div class="settings-page">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
          <p class="subtitle">自定义您的使用体验</p>
        </div>
      </template>

      <el-form 
        ref="formRef"
        :model="settings"
        label-width="120px"
      >
        <el-form-item label="界面主题">
          <el-radio-group v-model="settings.theme">
            <el-radio label="light">浅色</el-radio>
            <el-radio label="dark">深色</el-radio>
            <el-radio label="auto">跟随系统</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="默认生成风格">
          <el-select v-model="settings.defaultStyle">
            <el-option label="卡通" value="cartoon" />
            <el-option label="写实" value="realistic" />
            <el-option label="艺术" value="artistic" />
            <el-option label="动漫" value="anime" />
            <el-option label="漫画" value="comic" />
          </el-select>
        </el-form-item>

        <el-form-item label="图片质量">
          <el-select v-model="settings.imageQuality">
            <el-option label="普通" value="normal" />
            <el-option label="高清" value="hd" />
            <el-option label="超清" value="uhd" />
          </el-select>
        </el-form-item>

        <el-form-item label="分享有效期">
          <el-select v-model="settings.shareExpiry">
            <el-option label="7天" value="7" />
            <el-option label="30天" value="30" />
            <el-option label="永久" value="-1" />
          </el-select>
        </el-form-item>

        <el-form-item label="消息通知">
          <el-switch v-model="settings.notifications" />
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="saveSettings"
            :loading="saving"
          >
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const API_BASE_URL = 'http://localhost:5000'
const formRef = ref(null)
const saving = ref(false)

const settings = reactive({
  theme: 'light',
  defaultStyle: 'cartoon',
  imageQuality: 'normal',
  shareExpiry: '30',
  notifications: true
})

// 加载设置
const loadSettings = async () => {
  try {
    const token = localStorage.getItem('token')
    const response = await axios.get(
      `${API_BASE_URL}/api/settings`,
      {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }
    )
    
    if (response.data.status === 'success') {
      Object.assign(settings, response.data.data)
    }
  } catch (error) {
    ElMessage.error('加载设置失败')
  }
}

// 保存设置
const saveSettings = async () => {
  saving.value = true
  try {
    const token = localStorage.getItem('token')
    const response = await axios.put(
      `${API_BASE_URL}/api/settings`,
      settings,
      {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }
    )
    
    if (response.data.status === 'success') {
      ElMessage.success('保存成功')
      // 应用主题
      document.documentElement.setAttribute('data-theme', settings.theme)
    }
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  color: var(--el-text-color-primary);
}

.subtitle {
  margin: 10px 0 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style> 